<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <!--/*--> 引入css、jq、layui等样式、js <!--*/-->
  <meta th:include="~{layout/layout_head :: head}">
</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="/">首页</a>
            <a href="JavaScript:;">管理</a>
            <a>
              <cite>个人管理</cite></a>
          </span>
  <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
    <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header">
          <button class="layui-btn" onclick="xadmin.open('请假申请','/user/applyLeave',700,600)"><i class="layui-icon"></i>请假申请</button>
        </div>
        <div class="layui-card-body layui-table-body layui-table-main" style="min-height: 450px;">

          <form class="layui-form" style="padding: 0 45px;">
            <table class="layui-table" lay-size="lg">
              <colgroup>
                <col width="200">
                <col width="300">
                <col width="200">
                <col width="300">
              </colgroup>
              <tbody>
              <tr>
                <td style="text-align: right;">流程状态</td>
                <td>
                  <div style="width: 180px;">
                    <select name="status">
                      <option value="">请选择</option>
                      <option value="0">已完成</option>
                      <option value="2">流程中</option>
                      <option value="1">暂存</option>
                      <option value="3">被打回</option>
                      <option value="-1">撤销/删除</option>
                    </select>
                  </div>
                </td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td colspan="4" style="text-align: center;">
                  <button class="layui-btn" lay-submit lay-filter="find"><i class="layui-icon layui-icon-search"></i> 查 询</button>
                </td>
              </tr>
              </tbody>
            </table>
          </form>
          <br>
          <table id="process" lay-filter="process"></table>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<script>
  layui.use(['form', 'table', 'jquery'], function () {
    var table = layui.table;
    var form = layui.form;
    var $ = layui.jquery;
    var hasTable = false;

    //监听提交
    form.on('submit(find)', function (data) {
      var jsonData = data.field
      if (hasTable) {
        table.reload('tid', {
          where: {"status": jsonData.status}
        });
        return false;
      }
      hasTable = true
      //第一个实例
      table.render({
        id: 'tid',
        elem: '#process'
        , where: {"status": jsonData.status}
        , url: '/user/getProcess' //数据接口
        , page: true //开启分页
        ,parseData: function(res){ //res 即为原始返回的数据
          return {
            "code": res.code,
            "msg": res.message,
            "count": res.total,
            "data": res.data
          };
        }
        , cols: [
          [ //表头
            {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
            , {field: 'username', title: '用户名', width: 150, sort: true}
            , {
            field: 'businessType', title: '流程类型', width: 150, sort: true, templet: function (data) {
              if (data.businessType == 1) {
                return "人员流程";
              } else {
                return "其他流程";
              }
            }
            , sort: true
          }
            , {field: 'processName', title: '流程名称', width: 150, sort: true}
            , {
            field: 'processStatus', title: '状态', width: 100, templet: function (d) {
              if (d.processStatus == 2) {
                return '<b style="color: #1E9FFF;">流程中</b>';
              } else if (d.processStatus == 0) {
                return '<b style="color: blue;">完成</b>';
              } else if (d.processStatus == 3) {
                return '<b style="color: red;">被打回</b>';
              } else if (d.processStatus == -1) {
                return '<b style="color: orange;">撤销/删除</b>';
              } else if (d.processStatus == 1) {
                return '<b style="color: #5FB878;">暂存</b>';
              }
            }
            , sort: true
          }
            , {field: 'handleGroup', title: '可处理组', width: 120, sort: true}
            , {
            field: 'handleUser', title: '指定处理人', width: 120, templet: function (d) {
              if (d.handleUser == null) {
                return "无";
              }
            }
            , sort: true
          }
            , {field: 'createTime', title: '发起时间', width: 160, sort: true}
            , {field: 'updateTime', title: '更新时间', width: 160, sort: true}
            , {field: 'remarks', title: '备注', width: 200}
            , {
            fixed: 'right', title: '操作', width: 200, templet: function (d) {
              var html = '<button class="layui-btn layui-btn-xs layui-btn-normal" onclick="see(\'' + d.processId + '\')">流程图</button>';
              if (d.processStatus === "3") {
                html += '<button class="layui-btn layui-btn-xs" onclick="edit(\'' + d.processId + '\',2)">编 辑</button>'
                html += '<button class="layui-btn layui-btn-xs layui-btn-danger" onclick="cancel(\'' + d.processId + '\')">撤 销</button>'
              } else if (d.processStatus === "2") {
                html += '<button class="layui-btn layui-btn-xs layui-btn-danger" onclick="cancel(\'' + d.processId + '\')">撤 销</button>'
              } else if (d.processStatus === "1") {//暂存编辑
                html += '<button class="layui-btn layui-btn-xs" onclick="edit(\'' + d.processId + '\',0)">编 辑</button>'
              }
              return html;
            }
          }
          ]
        ]
      });
      return false;
    });
  })

  function see(processId) {
    window.open('/processDetail/' + processId)
  }

  //编辑
  function edit(processId, status) {
    xadmin.open('编辑请假', '/user/editLeave/' + processId + '?status=' + status, 1000, 600)
  }

  //撤销
  function cancel(processId) {
    layer.prompt({
      formType: 2,
      value: '无',
      title: '请出入撤销原因',
      area: ['220px', '150px'] //自定义文本域宽高
    }, function (value, indexx, elem) {
      //发异步，把数据提交给
      $.post({
        data: {"reason": value},
        url: '/user/cancelProcess/' + processId,
        success: function (data) {
          layer.msg(data.message)
        }
      });
      layer.close(indexx);
    });
  }
</script>
</html>
